import React, {Component} from 'react'
import {Col, Icon, Row, Tabs} from 'antd'
import {TwsBelongTask} from 'tws-antd'
import {connect} from 'react-redux'
import '../less/index.less'
import {withRouter} from 'react-router-dom'
import EditStatusBox from './common/edit-status-box'
import CommentBox from './common/comment-box'
import AssignmentContentAnswerBox from './common/assignment-content-answer-box'
import AssignmentSupplementaryBox from './common/assignment-supplementary-box'
import AssignmentEvaluateBox from './common/assignment-evaluate-box'
import AssignmentRankingBox from './common/assignment-ranking-box'
import AssignmentTagBox from './common/assignment-tag-box'
import UrlPattern from 'url-pattern'
import * as taskActions from '../actions/task'
import * as assignmentActions from '../actions/assignment'
import * as suggestionActions from '../actions/suggestion'
import * as userActions from '../actions/user'
import * as reviewQuizActions from '../actions/reviewQuiz'
import StudentLeftMenu from './common/students-left-menu'
import {addNotification} from '../actions/notification'
import {FormattedMessage} from 'react-intl'
import {getLangFromLocalStorage} from '../constant/lang-util'
import * as assignmentQuizTagAction from '../actions/assignment-quiz-tag'
import * as assignmentQuizMarkAction from '../actions/assignment-quiz-Mark'
import AssignmentReferenceAnswerBox from "./common/assignment-referenceAnswer-box";

const TabPane = Tabs.TabPane
class TutorAssignmentPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      sectionId: 0,
      studentId: 0,
      programId: 0,
      taskId: 0,
      assignmentId: 0,
      quizId: 0
    }
  }

  componentWillMount () {
    this.setState({
      taskId: this.props.match.params.taskId,
      programId: this.props.match.params.programId,
      studentId: this.props.match.params.studentId,
      assignmentId: this.props.match.params.assignmentId,
      quizId: this.props.match.params.quizId
    }, () => {
      this.props.getTaskInfo(this.state.taskId)
    })
    const {history, location} = this.props
    history.listen(this.update.bind(this))
    this.update(location)
  }

  update (location) {
    const pattern = new UrlPattern('/tutor/program/:programId/task/:taskId/student/:studentId/assignment/:assignmentId/quiz/:quizId')
    const urlParams = pattern.match(location.pathname.replace('divider/', '')) || {}
    this.setState({
      quizId: urlParams.quizId,
      assignmentId: urlParams.assignmentId
    }, () => {
      const {assignmentId, quizId, studentId} = this.state
      this.props.getStudentCurrentAssignmentQuiz(assignmentId, quizId, studentId)
      this.props.getReviewQuiz(studentId, assignmentId, quizId)
      this.props.getAssignmentSuggestion(assignmentId, quizId, studentId)
      this.props.getStudent(studentId)
      this.props.getStudentAssignmentQuizTags(assignmentId, quizId, studentId)
      this.props.getAssignmentQuizMark(assignmentId, quizId, studentId)
    })
  }

  changeStudent (studentId) {
    const {programId, taskId, assignmentId, quizId} = this.state
    this.props.history.push(`/tutor/program/${programId}/task/${taskId}/student/${studentId}/assignment/${assignmentId}/quiz/${quizId}`)
    this.setState({studentId})
  }

  getCompleteName (student) {
    const name = student.name || ''
    const userName = student.userName || ''

    return `${name}(@${userName})`
  }
  render () {
    const {taskInfo, assignmentQuizzesData, settings, assignmentQuizMark} = this.props
    const {programId, taskId, assignmentId, studentId, quizId} = this.state
    const quiz = assignmentQuizzesData.quiz
    const answer = quiz.userAnswer || ' '
    const {reviewQuiz, suggestions, student} = this.props.reviewQuizAndSuggestions
    const completeName = this.getCompleteName(student)
    const type = 'tutor'
    const assignments = taskInfo.assignments || []
    const currentAssignment = assignments.find(assignment => assignment.id === parseInt(this.state.assignmentId)) || {}
    const lang = getLangFromLocalStorage()
    return (<div>
      <Row>
        <Col span={3}>
          <StudentLeftMenu
            clickQuiz={this.changeStudent.bind(this)}
            studentId={this.state.studentId}
          />
        </Col>

        <Col span={20} offset={1}>
          <Row>
            <div className='padding-b-2'>
              <Col span={8}>
                <h2>{currentAssignment[`title_${lang}`] || currentAssignment.title}</h2>
              </Col>
              <Col span={6} offset={10}>
                <EditStatusBox
                  submitGrade={this.props.submitGrade}
                  addNotification={this.props.addNotification}
                  programId={this.state.programId}
                  answer={answer}
                  isDisabled={false}
                  reviewQuiz={reviewQuiz}
                  taskId={taskId}
                  quizId={quizId}
                  studentId={studentId}
                  assignmentId={assignmentId}
                  isTutor
              />
              </Col>
            </div>
          </Row>
          <Row >
            <Col>
              <div><Icon type='user' /> {completeName}</div>
            </Col>
          </Row>

          <TwsBelongTask title={<FormattedMessage id='所属任务卡' />}>
            <a href={settings.tutorUrl + `/program/${this.state.programId}/task/${this.state.taskId}/student/${this.state.studentId}`}>
              <Icon type='arrow-left' />{taskInfo[`title_${lang}`] || taskInfo.title}
            </a>
            <AssignmentTagBox
              programId={programId}
              assignmentId={assignmentId}
              quizId={quizId}
              studentId={studentId}
            />
          </TwsBelongTask>
          <AssignmentContentAnswerBox
            submitAnswer={this.props.submitAnswer}
            assignmentId={assignmentId}
            answer={answer}
            reviewQuiz={reviewQuiz}
            quiz={quiz}
          />
          <AssignmentSupplementaryBox
            reviewQuizId={reviewQuiz.id}
            reviewQuiz={reviewQuiz}
            userType={type}
          />
          <AssignmentReferenceAnswerBox
            referenceAnswer={quiz.referenceAnswer}
          />
          <AssignmentRankingBox
            programId={programId}
            assignmentId={assignmentId}
            quizId={quizId}
            studentId={studentId}
            assignmentQuizMark={assignmentQuizMark}
          /><br />
          <Tabs defaultActiveKey='1' type='card' >
            <TabPane tab={<h4><FormattedMessage id='助教反馈' /></h4>} key='1'>
              <CommentBox
                isTutor
                programId={programId}
                user={this.props.user}
                taskId={taskId}
                assignmentId={assignmentId}
                studentId={studentId}
                quizId={quizId}
                suggestions={suggestions}
                onModifyComment={this.props.modifyComment}
                onDeleteComment={this.props.deleteComment}
              />
            </TabPane>
            <TabPane tab={<h4><FormattedMessage id='隐藏评价' /></h4>} key='2'>
              <AssignmentEvaluateBox
                programId={programId}
                assignmentId={assignmentId}
                quizId={quizId}
                studentId={studentId}
                assignmentQuizMark={assignmentQuizMark}
                />
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    </div>
    )
  }
}

const mapStateToProps = ({settings, user, taskInfo, assignmentQuizzesData, reviewQuizAndSuggestions, assignmentQuizMark}) => ({
  user, taskInfo, assignmentQuizzesData, reviewQuizAndSuggestions, settings, assignmentQuizMark
})

const mapDispatchToProps = dispatch => ({
  submitGrade: (data, changeStatus) => dispatch(reviewQuizActions.submitTutorReview(data, changeStatus)),
  modifyComment: (commentId, content, assignmentId, quizId, studentId, isTutor) => dispatch(suggestionActions.modifyComment(commentId, content, assignmentId, quizId, studentId, isTutor)),
  deleteComment: (commentId, assignmentId, quizId, studentId, isTutor) => dispatch(suggestionActions.deleteComment(commentId, assignmentId, quizId, studentId, isTutor)),
  getTaskInfo: (taskId) => dispatch(taskActions.getTaskInfo(taskId)),
  getAssignmentSuggestion: (assignmentId, quizId, studentId) => dispatch(suggestionActions.tutorGetQuizSuggestions(assignmentId, quizId, studentId)),
  getReviewQuiz: (studentId, assignmentId, quizId) => dispatch(reviewQuizActions.tutorGetStudentReviewQuiz(studentId, assignmentId, quizId)),
  getStudentCurrentAssignmentQuiz: (assignmentId, quizId, studentId) => dispatch(assignmentActions.getStudentAssignmentQuiz(assignmentId, quizId, studentId)),
  getStudent: (studentId) => dispatch(userActions.getStudent(studentId)),
  addNotification: (data) => dispatch(addNotification(data)),
  getStudentAssignmentQuizTags: (assignmentId, quizId, studentId) => dispatch(assignmentQuizTagAction.getStudentAssignmentQuizTags(assignmentId, quizId, studentId)),
  getAssignmentQuizMark: (assignmentId, quizId, studentId) => dispatch(assignmentQuizMarkAction.getAssignmentQuizMark(assignmentId, quizId, studentId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TutorAssignmentPageBody))
